import React, { useEffect, useState } from 'react'
import { Row, Col, Typography, Card, Tag } from "antd"
import { RollbackOutlined } from '@ant-design/icons';
import { ajax } from '../../api';
import { baseURL } from '../../api/request';
import moment from '_moment@2.29.1@moment';
import { peportsTypeList } from '../../utils/commom';

const { Meta } = Card
const { Title } = Typography

export default function ReportDetail({ history, location }: any) {
    const [data, setData] = useState<any>(null)
    useEffect(() => {
        getOneData()

    }, [])
    const getOneData = async () => {
        let { code, result }: any = await ajax.getweixiuitem({
            _id: new URLSearchParams(location.search).get("aid")
        })
        if (code == 200) {
            setData(result)
        }
    }
    return (
        <div>
            <Title level={3} style={{ cursor: "pointer" }} onClick={() => history.go(-1)} >       <RollbackOutlined />查看维修报告  </Title>
            <Row>
                {
                    data && <Col>
                        <Card
                            hoverable
                            style={{ margin:'10px', width: 350,borderRadius:'20px'}}
                            cover={<img alt="example" height={240} src={data?.desc.replace(/public/, baseURL)} />}
                        >
                            <Meta style={{padding:'20px 0'}} title={data?.title} description={data?.content} />
                            <Tag  color={peportsTypeList.find((item: any) => item.value == data.type)?.color}>
                                    {peportsTypeList.find((item: any) => item.value == data.type)?.text}
                                </Tag>
                            <p style={{padding:'10px 0' ,fontWeight: 'bold' }}>
                                发表人:
                                {data?.userInfo?.username}
                            </p>
                            <p style={{ color: 'red' }}>日期:
                                {moment(data?.time).format('YYYY-MM-DD HH:mm:ss')}
                            </p>
                        </Card>,
                    </Col>
                }
            </Row>
        </div>
    )
}
